<template>
  <div class="home">
<!--    WebSocket方式实现群聊（私聊还没实现） 未启用-->
    <div class="input-session">
      <el-container>
        <el-header>
          <!--          头部内容显示-->
          <header-com/>
        </el-header>
        <el-container>
          <el-aside>
            <!--            好友列表显示-->
            <friends-list/>
          </el-aside>
          <el-main style="position:relative;">
            <!--            聊天内容显示-->
            <div id="assPCon" style="width:100%;height: 70%;display:block;overflow-y:auto;">
              <div v-for="dataList in datas">
                <div class="friend" v-if="dataList.userName != userName">
                  <div class="leftPhot">
                    <el-avatar :src="images"/>
                  </div>
                  <div class="rightMsg">
                    <!--                    <span>{{dataList.userName}}</span>-->
                    <div style="color:#4F779C;">{{ dataList.msg }}</div>
                  </div>
                </div>
                <div v-else style="width: 99%;height: 50px;">
                  <div style="float: right;">
                    <!--                    <div>{{dataList.userName}}</div>-->
                    <div class="friend">
                      <div class="rightMsg" style="text-align:right;margin-right: 10px;">
                        <div style="background-color: #12B7F5;">{{ dataList.msg }}</div>

                      </div>
                      <div class="leftPhot">
                        <el-avatar :src="images"/>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--富文本编辑器-->
            <div style="margin-top: 1rem;">
              <textarea v-model="chatContent" @keyup.enter="sendOut" style="width:100%;height: 150px"
                        placeholder="请输入内容"/>
              <button type="primary" @click="sendOut" class="sendBtn">发送</button>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>

// @ is an alias to /src
import {createSocket, pushMessage, setOnMessageCallback} from '../js/Socket'
import headerCom from '../components/header'
import friendsList from '../components/friendsList'
import {mapState} from 'vuex'
import {ACCOUNT_NUM,} from "../store/mutationTypes";
import webStore from "../store/webStore";
export default {
  name: 'Home',
  components: {
    headerCom,
    friendsList,
  },
  data() {
    return {
      images: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      chatContent: "",//需要发送的内容
      sendMsgArray: [],//发送的消息数组
      receiveMsgArray: [],//接收的消息数组
      datas: [],
      editorOption: {// 富文本框参数设置
        modules: {   //modules为自定义标题栏，使用默认的话可去掉modules
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],//分别对应的是： 粗体，斜体，下划线，删除线
            ['code-block'], ////引用，代码块
            [{'header': 1}, {'header': 2}],
            ["clean"], //清除字体样式
            ["image"], //上传图片、上传视频
          ]
        }
      },
    }
  },
  computed:{
    ...mapState({
      'account_num':state=>state.webStore.Config.ACCOUNT_NUM,
      'chooseUser':state=>state.webStore.Config.SELECT_FRIENDS,
    })
  },
  mounted() {
    // this.linkWebSocket();
    // this.getMsg();//进入页面先获取一遍看有没有新消息
  },
  methods: {
    // 连接webSocket
    linkWebSocket() {
      createSocket("ws://42.193.17.196:8000/linkSocket");
      setOnMessageCallback(this.onMessage);
    },
    //收到消息  就在这里处理
    onMessage(data) {
      console.log('收到消息：', data);
      this.datas.push(data)
    },
    sendOut() {
      pushMessage({"chatContent": this.chatContent, "user": this.account_num,"chooseUser":this.chooseUser})
      this.chatContent = "";
      // this.data = postMessage();
      this.$nextTick(() => {
        const div = document.getElementById('assPCon');
        div.scrollTop = div.scrollHeight;
      })
    },
  },

}
</script>

<style lang="less" scoped>
@width:100%;
@height:100%;
html,
body {
  width: @width;
  height: @height;
  padding: 0;
  margin: 0;
  color: #eee;
  background-color: black;
  .home{
    .ql-editor {
      height: 70px;
    }
    .input-session {
      height: 19%;
      width: @width;
      border: #eee 1px solid;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .el-header {
        background-color: #B3C0D1;
      }

      .el-aside {
        width: 20%;
        background-color: #D3DCE6;
      }

      .el-main {
        width: 70%;
        height: 670px;
        background-color: #E9EEF3;

        .friend {
          width: @width;
          height: 50px;
          .leftPhot {
            float: left;
            vertical-align: middle;
          }
        }
        .rightMsg {
          text-align: left;
          margin-left: 0.5rem;
          font-size: 11px;
          color: #686868;
          float: left;
          display: block;
          min-height: 20px;
          margin-top: 0.5rem;

          div:nth-child(1) {
            font-size: 15px;
            color: #000;
            border-radius: 10px;
            background-color: #A7EAF8;
            line-height: 30px;
            text-indent: 1rem;
            color: #fff;
            padding-right: 1rem;
          }

          div:nth-child(2) {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
        }


        .sendBtn {
          width: 100px;
          height: 30px;
          background-color: blue;
          color: #fff;
          border: 0;
          float: right;
          border-radius: 4px;
          cursor: pointer;
        }


      }
    }
  }
}

















</style>